<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>BOKI读书</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css" type="text/css"/>
    <link rel="stylesheet" href="/css/index.css" type="text/css"/>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js" type="application/javascript"></script>
</head>
<script>
    function handleBorrow() {
        var param = window.location.search.split('?')[1].split('=')[1];
        if (window.location.search.split('?')[1]==='flag'){
            if (param==='1'){
                alert('借阅成功');
            }
        }
    }
</script>
<body onload="handleBorrow()">
<div th:insert="~{navigation :: nav}"></div>
<div>
    <img src="/images/banner.png" alt="" style="z-index: -1;width:100%">
</div>
<div class="innerWrap" style="margin-top: 20px;">
    <div class="row" style="margin-left: 15px;margin-right: 15px">
        <div class="col-sm-6 col-md-2" th:each="book:${books}">
            <form action="/borrow">
            <div class="thumbnail" style="position: relative;padding-top: 140%;width: 100%;height: 100%;">
            <img style="padding: 3px; width: 100%;height: 65%;position: absolute;left: 0;top: 0;" th:src="${book.picture}" alt="你找的图片不在了">
            <div class="caption">
                <h4><div style="white-space: nowrap;overflow: hidden;text-overflow:ellipsis;font-weight: 600;font-size:150%" th:text="${book.name}"></div></h4>
                <input type="hidden" name="bid" th:value="${book.id}">
                <div style="color:gray;font-size:120%" th:text="${book.author}"></div>
                <br>
                <div style="text-align: center;">
                    <button th:if="${book.num>0}" type="submit" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#borrowModal">借书</button>
                    <button th:if="${book.num<=0}" type="button" class="btn btn-lg btn-primary" disabled="disabled">借书</button>
                    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" th:data-target="'#infoModal'+${book.id}">详情</button>
                </div>
                <!-- 详情 -->
                <div class="modal fade" th:id="'infoModal'+${book.id}" tabindex="-1" role="dialog" aria-labelledby="infoModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="infoModalLabel" th:text="${book.name}"></h4>
                            </div>
                            <div class="modal-body">
                                <div style="padding: 30px;" th:utext="${book.brief}"></div>
                                <div style="color: grey;">当前剩余：<span th:text="${book.num}"></span>本</div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </form>
        </div>
    </div>
    <nav aria-label="Page navigation" style="text-align: center;">
        <ul class="pagination">
            <li>
                <a th:href="@{/(page=1)}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li th:each="page:${#numbers.sequence(1,pages)}">
                <a th:href="@{'/?page='+${page}}" th:text="${page}"></a>
            </li>
            <li>
                <a th:href="@{'?page='+${pages}}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>
<!-- 借书 -->
<div class="modal fade" id="borrowModal" tabindex="-1" role="dialog" aria-labelledby="borrowModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="borrowModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>